<?php 
session_start();
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">


<title>信息管理</title>

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/landing-page.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- text fonts -->
<link rel="stylesheet" href="fonts/fonts.googleapis.com.css" />
<!-- ace styles -->
<link rel="stylesheet" href="css/ace.min.css" />
<!-- 验证码 -->
<link rel="stylesheet" href="js/style.css" />


<!--图标-->
    <link rel="apple-touch-icon" sizes="57x57" href="icon/apple-icon-57x57.png"/>
    <link rel="apple-touch-icon" sizes="60x60" href="icon/apple-icon-60x60.png"/>
    <link rel="apple-touch-icon" sizes="72x72" href="icon/apple-icon-72x72.png"/>
    <link rel="apple-touch-icon" sizes="76x76" href="icon/apple-icon-76x76.png"/>
    <link rel="apple-touch-icon" sizes="114x114" href="icon/apple-icon-114x114.png"/>
    <link rel="apple-touch-icon" sizes="152x152" href="icon/apple-icon-152x152.png"/>
    <link rel="apple-touch-icon" sizes="180x180" href="icon/apple-icon-180x180.png"/>
    <link rel="icon" sizes="192x192" type="" href="icon/android-icon-192x192.png"/>
    <link rel="icon" sizes="32x32" type="" href="icon/favicon-32x32.png"/>
    <link rel="icon" sizes="16x16" type="" href="icon/favicon-16x16.png"/>
    <link rel="icon" sizes="96x96" type="" href="icon/favicon-96x96.png"/>
    <link rel="manifest" href="icon/manifest.json"/>
    <meta name="msapplication-TileColor" content="#E6E6FA"/>
    <meta name="msapplication-TileImage" content="icon/ms-icon-144x144.png"/>
    <meta name="theme-color" content="#E6E6EA"/>

<!--service worker部分-->
    <script>
        if (‘serviceWorker’ in navigator) {
            window.addEventListener(‘load’, function() {
                navigator.serviceWorker.register(‘/sw.js’).then(
                    function(registration) {
                        // Registration was successful
                        console.log(‘ServiceWorker registration successful with scope: ‘, registration.scope); },
                    function(err) {
                        // registration failed :(
                        console.log(‘ServiceWorker registration failed: ‘, err);
                    });
            });
        }
    </script>




<style>
body{height:100%;background:#16a085;overflow:hidden;}
canvas{position:absolute; width:80px;}
</style>
<!--[if lte IE 9]>
<link rel="stylesheet" href="css/ace-part2.min.css" />
<![endif]-->
<link rel="stylesheet" href="css/ace-rtl.min.css" />
<!--[if lte IE 9]>
<link rel="stylesheet" href="css/ace-ie.min.css" />
<![endif]-->


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <!--验证码-->
	<script src="js/verificationNumbers.js" tppabs="js/verificationNumbers.js"></script>
	<script src="js/Particleground.js" tppabs="js/Particleground.js"></script>
</head>
<body>

<div class="intro-header">
   <div class="container">

       <div class="row">
           <div class="col-lg-12">
               <div class="intro-message">
                   <h1>Information Management</h1><br />
                   <button class="btn btn-success" style="font-family: '微软雅黑';font-size:3em;" type="button" onclick="popUp()" id="myButton">登陆</button>
                   <button class="btn btn-info" style="font-family: '微软雅黑';font-size:3em;" type="button" onclick="popUp_1()" id="myButton1">注册</button>
                   <hr class="intro-divider">

               </div>
           </div>
       </div>

   </div>
</div>

<!-- 登陆模态框（Modal） -->
<div class="modal  fade" id="myModal" style="padding-top: 10em;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button">&times;</button>
                <h4 class="modal-title" style="font-family: '微软雅黑';vertical-align: middle;"  >登陆账号</h4>
            </div>
            <!--中心部分-->
            <div style="padding-left: 10em; padding-right: 10em; padding-top: 4em;padding-bottom: 4em;">
            <form action="login.php" method="post">
                <fieldset>
                    <label class="block clearfix">
                        <span class="block input-icon input-icon-right">
                        <input type="text" class="form-control" placeholder="用户名" name="userName" onclick="hint()" data-toggle="tooltip" title="中英文皆可，最长14个字符"/>
                        <i class="ace-icon fa fa-user"></i>
                        </span>
                    </label>
                    <div class="space"></div>

                    <label class="block clearfix">
                        <span class="block input-icon input-icon-right">
                        <input type="password" class="form-control" placeholder="密码" name="password"onclick="hint()" data-toggle="tooltip" title="长度为6~14个字符，不允许有空格"/>
                        <i class="ace-icon fa fa-lock"></i>
                        </span>
                    </label>
                    <div class="space"></div>
                    <!--验证区-->
					<label >
						 <dd class="val_icon">
  							<div class="checkcode">
    							<input type="text" id="J_codetext" placeholder="验证码" maxlength="4" class="login_txtbx" style="padding-right:40px">
    							<canvas class="J_codeimg" id="myCanvas" onclick="createCode()">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas>
  							
 								<input type="button" value="核验" class="btn btn-sm btn-primary" onClick="validate();" style="margin-left:61px;"></div>
					    </dd>
					</label>                    
                    
                    <div class="space"></div>
                    <!--记住功能-->
                    <div class="clearfix">
                        <label class="inline">
                            <input type="checkbox" class="ace" />
                            <span class="lbl"> 记住</span>
                        </label>

                        <button  type="submit" class=" submit_btn width-35 pull-right btn btn-sm btn-primary" value="立即登陆" >
                            <i class="ace-icon fa fa-key"></i>
                            <span class="bigger-110">登录</span>
                        </button>
                    </div>
                    <div class="space-4"></div>
                </fieldset>
            </form>
            </div>

            <!--<div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>
                <button type="button" class="btn btn-primary">提交</button>
            </div>-->
        </div>
    </div>
</div>

<!-- 注册模态框（Modal） -->
<div class="modal  fade" id="myModal_1" style="padding-top: 10em;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button">&times;</button>
                <h4 class="modal-title" style="font-family: '微软雅黑';vertical-align: middle;"  >注册账号</h4>
            </div>
            <!--中心部分-->
            <div style="padding-left: 10em; padding-right: 10em; padding-bottom: 3em">
                <div class="space-6"></div>
                <p>填写信息: </p>

                <form action="insertRecord.php" method="post">
                    <fieldset>
                        <label class="block clearfix">
                            <span class="block input-icon input-icon-right">
                                <input type="text" class="form-control" placeholder="用户名" name="userName" onclick="hint()" data-toggle="tooltip" title="中英文皆可，最长14个字符"/>
                                <i class="ace-icon fa fa-user"></i>
                            </span>
                        </label>

                        <label class="block clearfix">
                            <span class="block input-icon input-icon-right">
                                <input type="email" class="form-control" placeholder="邮箱" name="email" onclick="hint()" data-toggle="tooltip" title="格式应为：***@email.com"/>
                                <i class="ace-icon fa fa-envelope"></i>
                            </span>
                        </label>


                        <label class="block clearfix">
                            <span class="block input-icon input-icon-right">
                                <input type="tel" class="form-control" placeholder="电话号码" name="telNumber" onclick="hint()" data-toggle="tooltip" title="移动号码应为确切的11位数字"/>
                                <i class="ace-icon fa fa-phone"></i>
                            </span>
                        </label>

                        <label class="block clearfix">
                            <span class="block input-icon input-icon-right">
                                <input type="password" class="form-control" placeholder="密码" name="password" onclick="hint()" data-toggle="tooltip" title="长度为6~14个字符，不允许有空格"/>
                                <i class="ace-icon fa fa-lock"></i>
                            </span>
                        </label>

                        <label class="block clearfix">
                            <span class="block input-icon input-icon-right">
                                <input type="password" class="form-control" placeholder="确认密码" name="repassword" onclick="hint()" data-toggle="tooltip" title="应与上面密码一样"/>
                                <i class="ace-icon fa fa-retweet"></i>
                            </span>
                        </label>
                    
          
                    
                        <label class="block">
                            <input type="checkbox" class="ace" />
                            <span class="lbl">
                                	接受<a href="#">用户协议</a>
                            </span>
                        </label>

                        <div class="space-24"></div>

                        <div class="clearfix">
                            <button type="reset" class="width-30 pull-left btn btn-sm">
                                <i class="ace-icon fa fa-refresh"></i>
                                <span class="bigger-110">重置</span>
                            </button>

                            <button type="submit" onclick="register()"  class="width-65 pull-right btn btn-sm btn-success">
                                <span class="bigger-110">注册</span>
                                <i class="ace-icon fa fa-arrow-right icon-on-right"></i>
                            </button>
                        </div>
                    </fieldset>
                </form>
            </div>

            <!--<div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>
                <button type="button" class="btn btn-primary">提交</button>
            </div>-->
        </div>
    </div>
</div>



<script>
    /*弹出模态框*/
    function popUp(){
        $("#myModal").modal({backdrop:false,keyboard:false});
    }

    function popUp_1(){
        $("#myModal_1").modal({backdrop:false,keyboard:false});
    }

/*      function register(){
    	$("#myModal_1").modal({backdrop:true,keyboard:true});
    	 $("#myModal").modal({backdrop:false,keyboard:false});
    }
 */


    $(document).ready(function() {
/*    	  //粒子背景特效
  	  $('body').particleground({
  	    dotColor: '#5cbdaa',
  	    lineColor: '#5cbdaa'
  	  });  */
  	  //验证码
  	  createCode();
  	  //测试提交，对接程序删除即可
  	  $(".submit_btn").click(function(){
  		  location.href="javascrpt:;"/*tpa=http://***index.html*/;
  		  });
  	});

	//提示信息
    function hint(){
    	$("[data-toggle='tooltip']").tooltip();
        }
</script>

</body>
</html>
